<template>
  <div>
    <div class="tip-upload" v-text="descTxt" />
    <el-upload v-if="uploadType=='avatar'" class="avatar-uploader" name="multipartfiles"
      accept="image/png, image/jpeg,image/jpg,image/gif" action="/api/v1/welder-fms-second/upload/fileUpload"
      :data="{projectId:userId}" :show-file-list="false" :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload" :disabled="disableds">
      <img v-if="imageUrl" :src="imageUrl|imgPath" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
    <el-upload v-else-if="uploadType=='image'" action="/api/v1/welder-fms-second/upload/fileUpload" multiple
      name="multipartfiles" :data="{projectId:userId}" :file-list="fileList" :before-upload="beforeUpload"
      :on-success="handleSuccess" :on-exceed="onExceed" list-type="picture-card" :on-remove="handleRemove"
      accept="image/png, image/jpeg,image/jpg,image/gif" :limit="maxLimit" :auto-upload="true">
      <i class="el-icon-plus" />
    </el-upload>
    <!-- <el-upload v-else-if="uploadType=='file1'" action="/api/v1/welder-fms-second/upload/fileUpload" multiple
      name="multipartfiles" :data="{projectId:userId}" :file-list="fileList" :before-upload="beforeUpload"
      :on-success="handleSuccess" class="1123122s" :on-exceed="onExceed" list-type="picture-card"
      :on-remove="handleRemove" accept=".pdf,.doc,.docx" :limit="maxLimit" :auto-upload="true">
      <i class="el-icon-plus" />
    </el-upload> -->
    <el-upload v-else class="upload-demo" action="/api/v1/welder-fms-second/upload/fileUpload" name="multipartfiles"
      :data="{projectId:userId}" :limit="maxLimit" :file-list="fileList" :before-upload="beforeUpload"
      :on-success="handleSuccess" :on-exceed="onExceed" :on-remove="handleRemove" :accept="delAccept"
      list-type="picture-card">
      <i slot="default" class="el-icon-plus" />
      <div slot="file" slot-scope="{file}">
        <template v-if="file.percentage<100">
          <el-progress type="circle" :percentage="parseInt(file.percentage)" />
        </template>
        <template v-else>
          <template v-if="file.type=='image'">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in" />
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                <i class="el-icon-delete" />
              </span>
            </span>
          </template>
          <template v-else-if="file.type==='video'">
            <video class="el-upload-list__item-thumbnail" :src="file.url" controls />
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                <i class="el-icon-zoom-in" />
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                <i class="el-icon-delete" />
              </span>
            </span>
          </template>
          <template v-else-if="file.type==='pdf'">
            <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
              <img style="max-width: 100%" src="~@/assets/img/download/.pdf.png" alt="">
              <span class="el-upload-list__item-actions">
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </template>
          <template v-else-if="file.type==='doc'">
            <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
              <img style="max-width: 100%" src="~@/assets/img/download/.word.png" alt="">
              <span class="el-upload-list__item-actions">
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </template>
          <template v-else-if="file.type==='xls'">
            <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
              <img style="max-width: 100%" src="~@/assets/img/download/.excel.png" alt="">
              <span class="el-upload-list__item-actions">
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </template>
          <template v-else-if="file.type==='ppt'">
            <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
              <img style="max-width: 100%" src="~@/assets/img/download/.ppt.png" alt="">
              <span class="el-upload-list__item-actions">
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </template>
          <template v-else-if="file.type==='audio'">
            <audio class="el-upload-list__item-thumbnail" :src="file.url" controls />
            <span class="el-upload-list__item-actions">
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                <i class="el-icon-download" />
              </span>
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                <i class="el-icon-delete" />
              </span>
            </span>
          </template>
          <template v-else-if="file.type==='zip'">
            <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
              <img style="max-width: 100%" src="~@/assets/img/download/.zip.png" alt="">
              <span class="el-upload-list__item-actions">
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </template>
          <template v-else>
            <div style="width: 100%;height: 100%;line-height: 148px;text-align: center">
              <img style="max-width: 100%" src="~@/assets/img/download/.txt.png" alt="">
              <span class="el-upload-list__item-actions">
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove1(file)">
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </template>
        </template>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <!-- <img v-if="['png', 'gif', 'jpg', 'jpeg'].indexOf(dialogType)!=-1" width="100%" :src="dialogImageUrl" alt=""> -->
      <img v-if="dialogType==='image'" width="100%" :src="dialogImageUrl" alt="">

      <video v-if="dialogType==='video'" width="100%" :src="dialogImageUrl" controls />
    </el-dialog>
  </div>

</template>

<script>
  import {
    matchType
  } from '../../../utils'
  import {
    imgPath
  } from '../../../filters'

  export default {
    name: 'WiseFile',
    props: {
      value: {
        type: String
      },
      uploadType: {
        type: String,
        default: 'avatar'
      },
      accept: {
        type: [String, Object]
      },
      limit: {
        type: Number,
        default: 3
      },
      maxFileSize: {
        type: Number,
        default: 1024 * 1024 * 100
      },
      fun: {
        type: Function
      },
      object: {
        type: Object
      },
      desc: {
        type: String
      },
      disableds: {
        typeof: Boolean
      }
    },
    data() {
      return {
        fileList: [],
        delAccept: '',
        imageUrl: '',
        maxLimit: 1,
        dialogImageUrl: '',
        dialogType: '',
        dialogVisible: false,
        disabled: false,
        descTxt: '',
        code: ''
      }
    },
    computed: {
      userId() {
        return this.$store.state.user.userId
      }
    },
    watch: {
      value(val) {
        if (val) {
          if (val !== this.imageUrl) {
            if (this.uploadType === 'avatar') {
              this.imageUrl = val
            }
            if (this.uploadType === 'image') {
              const srcArr = val.split(';')
              this.fileList = srcArr.map(item => {
                return {
                  name: item.substring(item.lastIndexOf('/') + 1, item.length),
                  url: imgPath(item),
                  baseUrl: item,
                  type: this.matchType(item)
                }
              })
            }
            if (this.uploadType === 'file') {
              const srcArr = val.split(';')
              this.fileList = srcArr.map(item => {
                return {
                  name: item.substring(item.lastIndexOf('/') + 1, item.length),
                  url: imgPath(item),
                  baseUrl: item,
                  type: this.matchType(item)
                }
              })
            }
          }
        } else {
          this.imageUrl = null
          this.fileList = []
        }
      },
      imageUrl(val) {
        this.$emit('input', val)
      },
      fileList(val) {
        if (val.length == 0) {
          this.$emit('input', null)
        }
      }
    },
    created() {
      this.init()
      if (this.value) {
        if (this.value !== this.imageUrl) {
          if (this.uploadType === 'avatar') {
            this.imageUrl = this.value
          }
          if (this.uploadType === 'image') {
            const srcArr = this.value.split(';')
            this.fileList = srcArr.map(item => {
              return {
                name: item.substring(item.lastIndexOf('/') + 1, item.length),
                url: imgPath(item),
                baseUrl: item,
                type: this.matchType(item)
              }
            })
          }
          if (this.uploadType === 'file') {
            const srcArr = this.value.split(';')
            this.fileList = srcArr.map(item => {
              return {
                name: item.substring(item.lastIndexOf('/') + 1, item.length),
                url: imgPath(item),
                baseUrl: item,
                type: this.matchType(item)
              }
            })
          }
        }
      } else {
        this.imageUrl = null
        this.fileList = []
      }
    },
    methods: {
      init() {
        this.descTxt = this.desc
        this.maxLimit = this.limit
        if (this.accept) {
          if (typeof this.accept === 'string') {
            this.delAccept = this.accept
          } else {
            this.$watch('object.' + this.accept.key, (newVal, oldVal) => {
              this.code = oldVal
              this.fun(newVal, this)
            })
          }
        }
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.result[0]
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 100
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
        }
        return isLt2M
      },
      beforeUpload(file) {
        if (file.size >= this.maxFileSize) {
          this.$message({
            message: `上传文件太大`,
            type: 'warning'
          })
          return false
        }
      },
      handleSuccess(response, file, fileList) {
        file.type = this.matchType(file.name)
        file.url = imgPath(response.result[0])
        file.baseUrl = response.result[0]
        this.fileList = fileList
        this.imageUrl = fileList.map(item => item.baseUrl).join(';')
      },
      onExceed(files, fileList) {
        this.$message({
          message: `最多只能上传${this.maxLimit}个文件`,
          type: 'warning'
        })
      },
      handleRemove(file, fileList) {

        this.fileList = fileList
        this.imageUrl = fileList.map(item => item.baseUrl).join(';')
      },
      handleRemove1(file) {
        this.fileList.splice(this.fileList.findIndex(item => item.url == file.url), 1)
        this.imageUrl = this.fileList.map(item => item.baseUrl).join(';')
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogType = file.type
        this.dialogVisible = true
      },
      handleDownload(file) {
        window.open(file.url)
      },
      matchType(filename) {
        return matchType(filename)
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>